<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
    	<el-button class="filter-item" type="primary" v-waves icon="el-icon-edit" @click="handleAdd">添加</el-button>
    	<div class="filter-item">
      	<el-input @keyup.enter.native="handleFilter" style="width: 200px;"  placeholder="请输入关键词" v-model="search.keyword"></el-input>
     	</div>
	    <div class="filter-item">
	    	<span class="txt">所属分类</span>
				<cateselect v-model="search.classifyId" :clearable="true">
					<el-option label="全部" :value="-1" slot="option"></el-option>
				</cateselect>
		  </div>
      <div class="filter-item">
      	<span class="txt">创建时间</span>
		    <el-date-picker
		    	style="width: 240px;"
		    	value-format="timestamp"
		      v-model="search.date"
		      type="daterange"
		      range-separator="-"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期">
		    </el-date-picker>
	    </div>
      <el-button class="filter-item" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table
       v-loading="!pload"
       @selection-change = "selectionChange"
        ref="multipleTable"
        border
        :data="tableData"
       >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="序号"
          align="center"
          show-overflow-tooltip
          width="55"
          >
          <template slot-scope="scope">
						{{scope.$index * currentPage + 1}}
          </template>
        </el-table-column>
        <el-table-column
          property="title"
          label="标题"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          property="classifyName"
          label="所属分类"
          align="center"
          width="200"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          label="发布时间"
          align="center"
          width="180"
          show-overflow-tooltip
          >
          <template slot-scope="scope">
						{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
          </template>
        </el-table-column>
        <el-table-column
          property="hits"
          label="点击量"
          align="center"
          width="100"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          label="操作"
          width="220"
          align="center"
        >
		      <template slot-scope="scope">
            <el-button size="mini" @click="handleView(scope.row)">详情</el-button>
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
		        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
		      </template>
        </el-table-column>
    </el-table>
    <div class="filter-bottom">
      <el-button-group class="filter-item">
	        <el-button @click="toggleSelection(-1)">全选</el-button>
	        <el-button @click="toggleSelection(0)" :disabled="!selection.length">反向选择</el-button>
	        <el-button @click="toggleSelection(1)" :disabled="!selection.length">取消选择</el-button>
	        <el-button type="danger" @click="toggleDel" :disabled="!selection.length">将选中文章移除到回收站</el-button>
      </el-button-group>
    </div>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
      :page-size="limit"
      :page-sizes="limits"
      background
      layout="sizes, prev, pager, next, jumper, total"
      :total="count">
      </el-pagination>
    </div>
    <edit v-if="edit" :id="selectTable.articleId" @getData="getData"></edit>
    <acontent v-if="content" :data="selectTable"></acontent>
  </div>
</template>

<script>
    import {artList,artRemove} from '@/utils/weApi'
    import waves from '@/directive/waves' // 水波纹指令
    import edit from './edit'
    import acontent from './content'
    import cateselect from './cateSelect'
    export default {
      directives: {
        waves
      },
      data(){
          return {
            tableData: [],
            search: {
              keyword: ''
            },
            selection: [],
            selectTable: {},
            pload: false,
            edit: false,
            content: false,
            currentPage:1,
            limit: 20,
            limits: [10,20,50,100],
            count:0,
          }
      },
      components: {
        edit,
        acontent,
        cateselect
      },
      created(){
         this.getData()
      },
      methods: {
        selectionChange (selection) {
          this.selection = selection
        },
        toggleSelection(s) {
          if (s===-1) {
            this.tableData.forEach(row => {
            	this.$refs.multipleTable.toggleRowSelection(row,true)
            })
          }
          if (s===0) {
            this.tableData.forEach(row => {
            	this.$refs.multipleTable.toggleRowSelection(row)
            })
          }
          if (s===1) {
            this.$refs.multipleTable.clearSelection()
          }
        },
        handleView (row) {
        	this.selectTable = row
          this.content = true
        },
        handleAdd () {
          this.selectTable = {articleId: ''}
          this.selectTable.method = 'add'
          this.edit = true
        },
        handleEdit(index, row) {
          this.selectTable = row
          this.selectTable.method = 'edit'
          this.edit = true
        },
        async handleDelete(index, row) {
          this.$confirm('确认要删除吗',{type:'warning'}).then(async () => {
            try{
              this.pload = false;
              await artRemove({articleIds: row.articleId})
              this.$notify({title: '删除成功', type: 'success', duration: 1000})
              this.getData()
            } catch(e) {
              this.pload = true;
            }
          })
        },
        toggleDel () {
          this.$confirm('确认要删除吗',{type:'warning'}).then(async () => {
            let ids = this.selection.map((i,index) => {
              return i.articleId
            }).join(',')
            try{
              this.pload = false;
              await artRemove({articleIds: ids})
              this.$notify({title: '删除成功', type: 'success', duration: 1000})
              this.getData()
            } catch(e) {
              this.pload = true;
            }
          })
        },
        async getData(){
          if (this.search.date) {
          	this.search.createTimeStart = this.search.date[0]
          	this.search.createTimeEnd = this.search.date[1]
          } else {
            delete this.search.createTimeStart
            delete this.search.createTimeEnd
          }
          let data = this.JSONo(
	          {
	          	delTag:0,
	            pageNum: this.currentPage,
	            pageSize: this.limit
	          },
          	this.search
          )
          this.pload = false
          const Datas = await artList(data)
          this.tableData = Datas.data
          this.count = Datas.pageInfo.total
          this.pload = true
        },
        handleFilter () {
          this.getData()
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`)
          this.limit = val
          this.getData()
        },
        handleCurrentChange(val) {
          this.currentPage = val
          this.getData()
        }
      }
    }
</script>
